<template>
	<view class="user">
		<view class="user-info">
			<image class="avatar" :src="userInfo.icon" mode="" @tap="toUserInfo"></image>
			<view class="info-holder">
				<view class="name">
					{{userInfo.nickname}}
				</view>
				<view class="username">
					{{userInfo.username}}
				</view>
			</view>
		</view>

		<view class="login-btn" v-if="token==''">
			<view class="login" @tap="toLogin">
				登录
			</view>
			<view class="resiger" @tap="toRegister">
				注册
			</view>
		</view>

		<view class="user-order">
			<view class="order-title">
				我的订单
			</view>
			<view class="order-list">
				<view class="order-item" v-for="(item,index) in orderBtnList" :key="index" @tap="toOrder(index)">
					<image :src="item.img" mode=""></image>
					<view class="order-name">
						{{item.name}}
					</view>
				</view>
			</view>

		</view>
		<view class="user-menu">
			<view class="menu-list">
				<view class="menu-item" v-for="(item,index) in menuBtnList" :key="index" @tap="linkTo(item.to)">
					<image :src="item.img" mode=""></image>
					<view class="menu-name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requestUserData
	} from 'api/user/user.js';
	import {
		mixin
	} from 'mixin/index.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				token: '',
				userInfo: {
					nickname: 'hi~',
					username: '您还没有登录呢',
					icon: '/static/icons/未登录.png'
				},
				orderBtnList: [{
						name: '待付款',
						img: '/static/icons/icon-pay.png',
					},
					{
						name: '已付款',
						img: '/static/icons/pay-done.png'
					},
					{
						name: '已发货',
						img: '/static/icons/icon-car.png'
					},
					{
						name: '已收货',
						img: '/static/icons/icon-done.png'
					},
					{
						name: '售后',
						img: '/static/icons/icon-back.png'
					}
				],
				menuBtnList: [{
						name: '商品收藏',
						img: '/static/icons/save.png',
						to:'/pages/user/goods-collection/goods-collection'
					},
					{
						name: '品牌',
						img: '/static/icons/brand.png',
					},
					{
						name: '文章收藏',
						img: '/static/icons/article.png',
						to:'/pages/user/article-collection/article-collection'
					},
					{
						name: '地址',
						img: '/static/icons/address.png',
						to: '/pages/user/address/address'
					},
					{
						name: '卡包',
						img: '/static/icons/card.png',
					},
					{
						name: '购物车',
						img: '/static/icons/cart2.png',
						to: '/pages/user/cart/cart'
					},
					{
						name: '联系客服',
						img: '/static/icons/tel.png',
					},
				]
			}
		},
		methods: {
			getUserInfo() {
				requestUserData().then(res => {
					if (res.code === 20000) {
						this.userInfo = res.data.userInfo;
						this.userInfo.username = '用户名：' + res.data.userInfo.username;
					} else {
						uni.showToast({
							title: '登录失败',
							icon: 'none',
						})
					}
					console.log(res);
				})
			},
			// 跳转登录界面
			toLogin() {
				uni.navigateTo({
					url: '/pages/user/login/login'
				})
			},
			// 跳转到注册界面
			toRegister(){
				uni.navigateTo({
					url:'/pages/user/login/register/register'
				})
			},
			// 跳转到订单界面
			toOrder(index){
				uni.navigateTo({
					url: `/pages/user/order/order?index=${index}`
				})
			},
			// 跳转用户信息界面
			toUserInfo() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/userInfo/userInfo'
					})
				}
			},
			// 点击跳转到方法界面
			linkTo(url) {
				if (!url) {
					return false;
				} else {
					uni.navigateTo({
						url
					})
				}
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : '';
			if (this.token) {
				this.getUserInfo();
			}
			this.showLoginModal();
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		padding: 0 40rpx;

		.user-info {
			padding-top: 60rpx;
			display: flex;
			align-items: center;

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.info-holder {
				margin-left: 32rpx;

				.name {
					font-size: 40rpx;
					font-weight: 600;
				}

				.username {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: #999;
				}
			}
		}

		.login-btn {
			display: flex;
			justify-content: center;

			view {
				margin: 0 30rpx;
				width: 178rpx;
				height: 72rpx;
				font-size: 15px;
				line-height: 72rpx;
				text-align: center;
			}

			.login {
				border: 1px solid #354e44;
				background-color: #354e44;
				color: #fff;
			}

			.resiger {
				border: 1px solid #354e44;
				color: #354e44;
			}
		}

		.user-order {
			box-sizing: border-box;
			padding: 0 54rpx;
			margin-top: 60rpx;
			width: 100%;
			height: 208rpx;
			background-color: #fff;

			.order-title {
				box-sizing: border-box;
				height: 76rpx;
				font-size: 26rpx;
				line-height: 76rpx;
				border-bottom: 2rpx solid #ddd;
			}

			.order-list {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				.order-item {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					height: 102rpx;

					image {
						display: block;
						width: 40rpx;
						height: 40rpx;
					}

					.order-name {
						font-size: 26rpx;
						line-height: 36rpx;
						text-align: center;
						width: 80rpx;
					}
				}
			}


		}

		.menu-list {
			margin-top: 60rpx;
			padding: 30rpx 0 60rpx 0;
			display: flex;
			flex-wrap: wrap;
			background-color: #fff;

			.menu-item {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				height: 200rpx;
				width: 33.3%;

				image {
					display: block;
					width: 50rpx;
					height: 50rpx;
				}

				.menu-name {
					margin-top: -40rpx;
					font-size: 26rpx;
					line-height: 36rpx;
					text-align: center;
					width: 100%;
				}
			}
		}
	}
</style>
